<template>
  <div class="focusDetail">
     <div class="top" style="margin-top:.3rem">
          <!-- <yl-search :submit="search" :ylstyle="searchStyle" @getValue="getMobile"></yl-search> -->
          <div @click="newgroup">新建分组
               <yd-icon name="next" slot="icon" custom  size=".3rem" color="#000000"></yd-icon>
          </div>
          <!-- 、<img src="./img/add.png"> -->
          <div @click="addnew">添加关注
              <yd-icon name="next" slot="icon" custom  size=".3rem" color="#000000"></yd-icon>
          </div>
          <div @click="showapply">新的关注
              <yd-icon name="next" slot="icon" custom  size=".3rem" color="#000000"></yd-icon>
          </div>
          <div @click="showfocus">关注我的
              <yd-icon name="next" slot="icon" custom  size=".3rem" color="#000000"></yd-icon>
          </div>
     </div>
     <!-- 关注列表 -->
     <div class="focusList">
          <!-- 关注群 -->
            <div>
                <div class="item circle" v-for="(cir,num) in circle" :key="num" @click="tomap(num)">
                    <div class="left">
                        <img src="./img/family.png" class="mycir">
                    </div>
                    <div class="midC">
                        <p>{{cir.groupname}}</p>
                        <span v-if="cir.number!==0">{{cir.number}}人在线</span>
                    </div>
                    <div class="rightC">
                         <img src="./img/position.png">
                    </div>
                </div>
            </div>
            <!-- 列表 -->
           <div class="item"  v-for="(item,index) in list" :key="index" @click="toumap(index)">
               <div class="left">
                    <img :src="item.user.photo">
                </div>
            <div class="mid">
              <p  v-if="item.remark==''">{{item.user.name}}</p>
              <p  v-if="item.remark!=''">{{item.remark}}</p>
              <span>{{item.uMsg}}</span>
            </div>
            <div class="right">
                <div>
                      <img src="./img/Cloud.png" v-if="item.cloud">
                    <img src="./img/Cloud-m.png" v-if="!item.cloud">
                </div>
                <div>
                    <img src="./img/sleep.png" v-if="item.sleep">
                    <img src="./img/sleep-m.png" v-if="!item.sleep">
                </div>
                <div>
                    <img src="./img/bike.png" v-if="item.bike">
                    <img src="./img/bike-m.png" v-if="!item.bike">
                </div>
                <div>
                    <img src="./img/heart.png" v-if="item.heart">
                    <img src="./img/heart-m.png" v-if="!item.heart">
                </div>
                <div>
                    <img src="./img/position.png" v-if="item.position">
                    <img src="./img/position-m.png" v-if="!item.position">
                </div>
            </div>
           </div>
     </div>
  </div>
</template>
<script>
import ylList from '@/components/list'
import ylSearch from '@/components/search'
export default {
   components:{
    ylList,ylSearch
  },
  data(){
      return{
            searchStyle:{
                height:'.8',//高度，必须
                bgcolor:'#FFB36E',//背景，可选
                remind:'搜索想找的人',//placeholder可选
                close:false, //开关 可选
            },
          list:[
            //   {"photo":"http://img1.shikee.com/try/2016/06/23/14381920926024616259.jpg","remark":"aaa","uMsg":"123","sleep":true,"heart":false,"position":true,"cloud":true,"bike":false},
            //   {"photo":"http://img1.shikee.com/try/2016/06/23/14381920926024616259.jpg","remark":"aaa","uMsg":"123","sleep":true,"heart":false,"position":false,"cloud":false,"bike":false},
            //   {"photo":"http://img1.shikee.com/try/2016/06/23/14381920926024616259.jpg","remark":"aaa","uMsg":"1222","sleep":true,"heart":true,"position":true,"cloud":true,"bike":true},
            //   {"photo":"http://img1.shikee.com/try/2016/06/23/14381920926024616259.jpg","remark":"aaa","uMsg":"111","sleep":false,"heart":false,"position":true,"cloud":true,"bike":false},
          ],
          circle:[
            //   {"name":"我的家庭群 01","count":'3',"time":'15.30',"pic":require('./img/family.png')},
            //   {"name":"这是小区群 01","count":'52',"time":'15.30',"pic":require('./img/family.png')},
            //   {"name":"这是啥子群 03","count":'11',"time":'15.30',"pic":require('./img/family.png')},
          ]
      }
  },
  methods:{
    newgroup(){//新建分组
        let a={
            type:"focus"
        }
        this.$store.commit("addorfo",a)
        // this.$router.push({path:"/common/add"})
        this.$router.push({path:"/common/newgroup"})
    },
    tomap(num){//分组地图跳转
        let a=this.circle[num]
        a.type="focus"
        this.$store.commit('choseGroup',a)//保存状态到vuex 确保后续操作
        this.$store.commit('stateWrite',"focus")//保存状态到vuex 确保后续操作
        let data={
            groupID:this.circle[num].id,
            userId:localStorage.userid
        }        
        this.ylAjax.focusGroupMap(data)
            .then(res=>{
                if(res.state==0){
                    console.log(res)
                    this.$store.commit('mapdata','') 
                    this.$store.commit('mapdata',res)  
                    this.$router.push({name:'focusGroupMap'}); 
                }
            })
        // this.$router.push({path:"/focus/groupmap"})
    },
    toumap(index){//跳转个人地图
        let data={
            userId:localStorage.userid,
            attentionUserID:this.list[index].attentionUserID
        }
        this.ylAjax.shwoSigfocus(data)
            .then(res=>{
                if(res.state==0){
                        console.log(res.data)
                      this.$router.push({path:'/focus/usermap',query:{data:res.data}})
                }
            })
      
    },
    addnew(){//添加关注人员
        let a={
            type:"focus"
        }
        this.$store.commit("addorfo",a)
        this.$router.push({path:"/common/add"})
    },
    showapply(){//查看申请
         this.$router.push({path:"/focus/apply"})
    },
    showfocus(){//查看关注我的人
        let data={
            userID:localStorage.userid
        }
        this.ylAjax.showWhoFocusMe(data)
            .then(res=>{
                console.log(res)
            })
        this.$router.push({path:'/focus/myFocused'})
    },
    showList(){//关注列表
        let data={
            userId:localStorage.userid
        }
        this.ylAjax.showMyFocus(data)
            .then(res=>{
                if(res.state==0){
                    // console.log(res)
                    for(let i=0;i<res.data.length;i++){
                        res.data[i].sleep=true
                        res.data[i].heart=true
                        res.data[i].position=true
                        res.data[i].cloud=true
                        res.data[i].bike=true
                    }
                    this.list=res.data
                }
            })
    },
    showGroupList(){//分组列表
        let data={
            userId:localStorage.userid
        }
        this.ylAjax.showFocusGroup(data)
            .then(res=>{
                if(res.state==0){
                    // console.log(res)
                    this.circle=res.data
                }
            })
    }
  },
  mounted(){
        // console.log(1)
        this.showList()
        this. showGroupList()
  },
activated(){
        // console.log(1)
        this.showList()
        this. showGroupList()
    }
}
</script>
<style lang="less" scoped>
    @import '~less/base';
    .focusDetail{
            position: absolute;
            top: 1rem;
            bottom: 0;
            width: 100%;
            overflow: hidden;
            overflow-y: scroll;
        .top{//菜单
            div{
                line-height: 1rem;
                font-size: 14px;
                margin: 0 .5rem;
                border-bottom: 1px solid @color-border4;                
                i{
                    float: right;
                }
               
            }
            :last-child{
                    // border-bottom: 0;
            }
        }
        .focusList{//关注列表
        margin-top:.1rem;
            img{
                max-width:100%;
                max-height: 100%;
            }
            .item{//下方列表，关注和分组
                    display: flex;
                    border-bottom: 1.5px solid @color-border4;
                    height: 1.3rem;
                .left{//左侧头像
                    flex: 0 0 20%;
                    line-height: 1.3rem;
                    img{
                        width: .9rem;
                        border-radius: 50%;
                        vertical-align: middle;
                        border: .01rem solid @color-border4;
                        margin-left: .15rem;
                    }
                    .mycir{
                         border: .01rem solid @color-border5;
                    }
                }
                .mid{//姓名
                    flex: 0 0 20%;
                    line-height: .6rem;
                    span{
                        color: @color-c2;
                    }
                }
                .midC{//群
                    flex: 0 0 60%;
                    line-height: .6rem;
                    span{
                        color: @color-c;
                    }
                }
                .right{//状态
                    flex: 0 0 60%;
                    display: flex;
                    div{
                        flex: 0 0 20%;
                        line-height: 1.3rem;
                        img{
                            width: .4rem;
                            vertical-align: middle;
                        }
                    }
                }
                .rightC{//群
                    flex: 0 0 20%;
                    line-height: 1.3rem;
                    text-align: center;
                    img{
                      width: .4rem;
                      vertical-align: middle;  
                    }
                }
            }
            .circle{//群分组
                background-color: @background-a;
                border-bottom: 1px solid @color-border3;
            }
        }
    }
    
</style>

